<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>维修服务</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/sq.css" media="all">
    <style type="text/css">
        body{
        }
        #mainContainer{
            padding: 10px;
            overflow: hidden;
        }
        #formContainer{
            background-color: #FFF;
            padding: 10px;
        }
        .ts-container {

        }
        .ts-container li{
            padding: 0 5px 0 5px;
            overflow: hidden;
            margin-top: 5px;
        }
        .ts-card {
            background-color: #f8f8f8;
            overflow: hidden;
            border-radius: 3px;
            padding-bottom: 10px;
        }
        .ts-card__image {
            background-color: #efefef;
            height: 200px;
        }
        .ts-card__image img{
            width: 100%;
            max-height: 200px;
        }
        .ts-card__title {
            display: inline-block;
            background-color: #CDA3B1;
            font-size: 12px;
            line-height: 26px;
            color: #FEFFFF;
            margin-left: 15px;        /* 20 * 12 / 16 */
            padding: 0;
            padding-left: 3px;
            padding-right: 3px;
            line-height: 26px;
        }
        .ts-card__description {
            background-color: #f8f8f8;
            width: 100%;
        }
        .ts-card__description--title {
            font-size: 14px;
            color: #666;
            margin-top: 14px;             /* 22 * 16 / 24 */
            line-height: 16px;
            padding: 0 10px 0 10px;
        }
        .ts-card__description--discount {
            display: inline-block;
            font-size: 12px;
            border-style: solid;
            border-width: 1px;
            border-color: #FF0000;
            color: #F00;
            margin-left: 15px;
            margin-top: 12px;
            text-align: center;
            padding: 0 2px 0 2px;
            /*84 / 346*/
        }
        .ts-card__description--pricebox {
            margin-left: 15px;
            margin-top: 10px;   /* 30 / 24 * 16 */
            font-size: 16px;
            font-weight: bold;
            color: #666666;

            display: flex;
            flex-direction: row;

            justify-content: space-between;
        }
        .ts-card__description--similar {
            font-size: 12px;
            border:1px solid #F00;
            color: #F00;
            border-radius: 16px;
            background-color: #ffe6eb;
            padding: 2px 5px 2px 5px;
            margin-right: 5px;
        }
        .ts-card__recommand {
            margin-left: 15px;
            margin-top: 10px;   /* 30 / 24 * 16 */
            font-size: 12px;

            border-top: 1px solid #e9e9e9;
            color: #818181;

            padding-top: 8px;
        }
        .ts-card__title--text {
            font-weight: bold;
        }
        #comUL{
            padding: 5px 0 0 0;
        }
        .layui-form-label{
            width: 60px;
        }
    </style>
</head>
<body>
<div id="mainContainer">
    <div class="layui-elem-quote" style="background-color: #FFF;">
        请输入您的姓名、联系电话、地址并选择需维修的设备类目。
    </div>
    <div id="formContainer">
        <div style="width: 96%;">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">联系人</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入您的姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required" lay-filter="machType">
                        <option value=""></option>
                        <option value="0">大型设备</option>
                        <option value="1">掘进机设备</option>
                        <option value="2">排风设备</option>
                        <option value="3">某某设备</option>
                        <option value="4">其他设备</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">问题描述</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        </div>
    </div>
    <ul class="ts-container" id="comUL">

    </ul>
</div>
<div id="bottomContent">
    <ul id="bottomUL">
        <li >
            <i class="layui-icon" onclick="window.location.href='index.html'">&#xe68e;</i>
            <br><span>首页</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='ddlist.html'">&#xe63c;</i>
            <br><span>订单</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='cart.html'">&#xe657;</i>
            <br><span>购物车</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='my.html'">&#xe612;</i>
            <br><span>我的</span>
        </li>
    </ul>
</div>
<!--下方为模板部分-->
<!--用户登陆的模板-->
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" language="JavaScript"></script>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/echarts.min.js"></script>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        form.on('select(machType)', function(data){
            sq.setapi("worker"+data.value+".json").setdata({}).sucessFun(function(rel){
                var obj = rel.comlist;
                $("#comUL").html("");
                for(var i=0;i<obj.length;i++){
                    $("#comUL").html($("#comUL").html()+'<li class="layui-col-xs6"><div style="" class="ts-card">' +
                        '<div class="ts-card__image">' +
                        '<img src="'+obj[i].img_url+'" /></div>' +
                        '<div style="height: 26px; margin-top:-13px; "><div class="ts-card__title">' +
                        '<div class="ts-card__title--text">'+obj[i].branch+'</div></div></div>' +
                        '<div class="ts-card__description">' +
                        '<div class="ts-card__description--title">'+obj[i].name+'</div>' +
                        '<div class="ts-card__description--pricebox">' +
                        '<div class="ts-card__description--price">电话：'+obj[i].price+'</div>' +
                        '</div></div>' +
                        '<div class="ts-card__recommand">'+obj[i].recommand+'</div></div>' +
                        '</li>'
                    );
                }
            }).run();
        });
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

    });
</script>
</html>